<!-- 垂直于大地表面的 Marker 图层属性 详情参数参考官网 -->
<template>
  <div
    class="markAttriubte"
    :style="'max-height:' + ($store.state.windowAttributes.height + 300) + 'px'"
  >
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="markAttr" header="标注层属性">
        <a-form-item label="状态">
          <a-radio-group v-model:value="zMarkLayerComponentsAttr.visible">
            <a-radio :value="true">显示</a-radio>
            <a-radio :value="false">隐藏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="主题">
          <a-select
            class="inputStyle"
            :options="styleOptions"
            v-model:value="
              zMarkLayerComponentsAttr.sourceData.features[0].properties
                .styleName
            "
          />
        </a-form-item>
        <a-form-item label="文字内容">
          <a-input
            class="inputStyle"
            allowerClear
            :placeholder="
              zMarkLayerComponentsAttr?.sourceData?.features[0]?.properties
                ?.name
                ? zMarkLayerComponentsAttr.sourceData.features[0].properties
                    .name
                : '请输入提示框内容'
            "
            v-model:value="
              zMarkLayerComponentsAttr.sourceData.features[0].properties.name
            "
          />
        </a-form-item>
        <a-form-item label="视角方向">
          <a-radio-group
            v-model:value="zMarkLayerComponentsAttr.layerStyle.alwaysFront"
          >
            <a-radio :value="true">跟随</a-radio>
            <a-radio :value="false">锁定</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="旋转角度">
          <a-input-number
            class="inputStyle"
            :disabled="!zMarkLayerComponentsAttr.layerStyle.alwayFront"
            :min="0"
            v-model:value="zMarkLayerComponentsAttr.layerStyle.rotation"
          />
        </a-form-item>
        <a-form-item label="透明度">
          <a-input-number
            class="inputStyle"
            :step="0.1"
            :max="1"
            :min="0.1"
            v-model:value="zMarkLayerComponentsAttr.opacity"
          />
        </a-form-item>
        <a-form-item label="关联值">
          <a-input
            class="inputStyle"
            v-model:value="
              zMarkLayerComponentsAttr.sourceData.features[0].properties.key
            "
          />
        </a-form-item>
        <a-form-item label="宽度">
          <a-input-number
            class="inputStyle"
            v-model:value="zMarkLayerComponentsAttr.layerStyle.size[0]"
          />
        </a-form-item>
        <a-form-item label="高度">
          <a-input-number
            class="inputStyle"
            v-model:value="zMarkLayerComponentsAttr.layerStyle.size[1]"
          />
        </a-form-item>
        <a-form-item label="层级">
          <a-input-number
            class="inputStyle"
            :min="12"
            v-model:value="zMarkLayerComponentsAttr.zIndex"
          />
        </a-form-item>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
export default {
  props: ['zMarkLayerComponentsAttr'],
  data() {
    return {
      activeKey: 'markAttr',
      styleOptions: [
        { value: 'blue', label: '蓝色主题' },
        { value: 'yellow', label: '黄色主题' },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.markAttriubte {
  .inputStyle {
    width: 160px;
  }
}
/deep/ .vc-color-wrap {
  width: 160px;
}
</style>
